<%@ page contentType="text/html;charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<es:contentHeader>
<%@include file="/WEB-INF/jsp/common/import-zTree-css.jspf"%>
</es:contentHeader>

<div class="page-content" style="height:100%">
    <div class="row">
        <div class="col-sm-4 widget-container-col ui-sortable">
            <div class="widget-box widget-color-blue ui-sortable-handle">
                <div class="widget-header">
                    <h5 class="widget-title bigger lighter">
                        <i class="ace-icon fa fa-hand-o-right"></i> 树列表
                    </h5>
                    <div class="widget-toolbar">
                        <label class="white" data-tooltip data-placement="bottom" title="显示所有">
                            <input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-rotate" type="checkbox">
                            <span class="lbl"></span>
                        </label>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="widget-main no-padding overflow-auto clearfix search_area">
                        <div id="treeContainer"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8 widget-container-col ui-sortable">
            <div class="widget-box widget-color-blue ui-sortable-handle">
                <div class="widget-header">
                    <h5 class="widget-title bigger lighter">
                        <i class="ace-icon fa fa-hand-o-right"></i> 子列表
                    </h5>
                </div>
                <div class="widget-body">
                    <div class="widget-main no-padding clearfix search_area">
                        <iframe name="listFrame" class="full-size no-border" scrolling="auto"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<es:contentFooter>
<%@include file="/WEB-INF/jsp/common/import-zTree-js.jspf"%>
<script type="text/javascript">
    $(function () {
        // 自适应高度
        $('.widget-main').heightenTo('.page-content');

        $.zTree.initMovableTree({
            containerId: 'treeContainer',
            urlPrefix : "${ctx}/showcase/tree",
            async : true,
            onlyDisplayShow:${param['search.show_eq'] eq true},
            permission: <es:treePermission resourceIdentity="sys:resource"/>,
            autocomplete : {enable : true},
            setting : {
                callback : {
                    onClick: function(event, treeId, treeNode) {
                        var frame = window.frames['listFrame'];
                        $.app.openLoading();
                        frame.location.href= ctx + '/showcase/tree/' + treeNode.id + '/update';
                        $(frame).on('load', function(){
                            $.app.closeLoading();
                        })
                    }
                }
            }
        });
    });
</script>
</es:contentFooter>